<template>
  <div>
    <el-card v-show="qx===1">
      <div slot="header" class="clearfix">
        <span> 后处理管理</span>
        <el-button style="float: right" size="mini" @click="qxClick(2)">机构权限</el-button>
      </div>
      <el-button type="primary" v-show="isVisible" style="float: right"
                 @click="sc">生成不合格抽样单
      </el-button>
      <el-table :data="tableData" style="width: 100%" :fit="true">
        <el-table-column prop="date" label="日期">
        </el-table-column>
        <el-table-column prop="address" label="单号">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column property="zl" label="整改资料">
          <template slot-scope="scope">
            <a :href="scope.row.zl"
               style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.zl}}</a>
          </template>
        </el-table-column>
        <el-table-column property="tz" label="整改通知">
          <template slot-scope="scope">
            <a :href="scope.row.tz"
               style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.tz}}</a>
          </template>
        </el-table-column>
        <el-table-column property="tz" label="整改结果">
          <template slot-scope="scope">
            <a :href="scope.row.jg"
               style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.jg}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="tag" label="是否合格" :filters="[{text: '不合格', value: '0'}, {text: '合格', value: '1'}]"
                         :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.tag == 0" type="danger" disable-transitions>不合格</el-tag>
            <el-tag v-if="scope.row.tag == 1" type="success" disable-transitions>合格</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="不合格抽样单" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="date" label="日期"></el-table-column>
          <el-table-column property="address" label="企业名称"></el-table-column>
          <el-table-column property="name" label="姓名"></el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 20px">
          <el-button type="primary" @click="showChange">下发整改</el-button>
        </div>
      </el-dialog>
    </el-card>
    <el-card v-show="qx===2">
      <div slot="header" class="clearfix">
        <span> 后处理管理</span>
        <el-button style="float: right" size="mini" @click="qxClick(1)">省局权限</el-button>
      </div>
      <el-table :data="noData">
        <el-table-column property="date" label="日期"></el-table-column>
        <el-table-column property="address" label="单号"></el-table-column>
        <el-table-column property="name" label="姓名"></el-table-column>
        <el-table-column property="zl" label="整改资料">
          <template slot-scope="scope">
            <a :href="scope.row.zl"
               style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.zl}}</a>
          </template>
        </el-table-column>
        <el-table-column property="tz" label="整改通知">
          <template slot-scope="scope">
            <a :href="scope.row.tz"
               style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.tz}}</a>
          </template>
        </el-table-column>
        <el-table-column property="tz" label="整改结果">
          <template slot-scope="scope">
            <a :href="scope.row.jg"
               style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.jg}}</a>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="操作" width="300" fixed="right" align="center">
          <template slot-scope="scope">

            <el-upload
              style="display: inline-block"
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-success="successFun2">
              <el-button size="small" type="primary" @click="upData(scope.$index)">上传结果</el-button>
            </el-upload>

            <el-upload
              style="display: inline-block"
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-success="successFun">
              <el-button size="small" type="primary" @click="upData(scope.$index)">上传整改资料</el-button>
            </el-upload>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        qx: 1,
        isVisible: false,
        dialogTableVisible: false,
        noData: [],
        tableData: [{
          date: '2016-05-02',
          name: '李XX',
          address: 'xxxxxxxxx0000022',
          zl:'',
          tz:'',
          jg:'',
          tag: '0'
        }, {
          date: '2016-05-04',
          name: '李X',
          address: 'xxxxxxxxx0000022',
          zl:'',
          tz:'',
          jg:'',
          tag: '0'
        }, {
          date: '2016-05-01',
          name: '李XX',
          address: 'xxxxxxxxx0000022',
          zl:'',
          tz:'',
          jg:'',
          tag: '0'
        }, {
          date: '2016-05-03',
          name: '李XXX',
          address: 'xxxxxxxxx0000022',
          zl:'',
          tz:'',
          jg:'',
          tag: '1'
        }],
        gridData: [{
          date: '2016-05-02',
          name: '李XX',
          address: 'xxxxxxxxx0000022',
          zl:'',
          tz:'',
          jg:'',
          tag: '0'
        }, {
          date: '2016-05-04',
          name: '李XX',
          address: 'xxxxxxxxx0000022',
          zl:'',
          tz:'',
          jg:'',
          tag: '0'
        }, {
          date: '2016-05-01',
          name: '李XX',
          address: 'xxxxxxxxx0000022',
          zl:'',
          tz:'',
          jg:'',
          tag: '0'
        }],
        xb:'',
      };
    },
    methods: {
      downData(){
      },
      upData(index){
          this.xb= index;
      },
      successFun(response, file, fileList) {
        this.noData[this.xb].zl = file.url
        this.tableData[this.xb].zl = file.url
        this.noData[this.xb].tz = 'file:/\/\/\E:/\logs/\jeesite/\jeesite.log'
        this.tableData[this.xb].tz = 'file:/\/\/\E:/\logs/\jeesite/\jeesite.log'
      },
      successFun2(response, file, fileList) {
        this.noData[this.xb].jg = file.url
        this.tableData[this.xb].jg = file.url

      },
      sc(){
        this.noData = this.gridData
        this.dialogTableVisible = !this.dialogTableVisible
      },
      qxClick(type){
        this.qx = type
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        this.isVisible = value == 0
        return row.tag === value;
      },
      showChange(){
        this.$message({
          message: '下发整改成功',
          type: 'success'
        });
        this.dialogTableVisible = false
      }
    }
  };
</script>

<style>
 .el-upload-list{
   display: none;
 }
</style>
